<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JQ留言板</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				background-color: lightgray;
				width: 500px;
				margin: 100px auto;
				padding-left: 10px;
			}
			#qq{
				width: 400px;
				margin: 20px 10px;
			}
			#words{
				width: 410px;
				height: 100px;
				vertical-align: top;
			}
			#sub{
				width: 100px;
				border-radius: 0%;
				margin: 20px 37px;				
			}
			#box>h3{
				margin: 0;
			}
			#newbox{
				width: 500px;
				background-color: lightgray;
				overflow: hidden;
				display: none;
			}
			#newbox>p:nth-child(1){
				width: 450px;
				background-color: whitesmoke;
			}
			#newbox>p:nth-child(2){
				width: 450px;
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div id="box">
				QQ:<input type="text" name="qq" id="qq" value="" /><br />
				留言:<textarea name="" rows="5" cols="20" id ="words" value=""></textarea><br />
				<button id ="sub">提交</button>
			<h3>显示留言</h3>	
		</div>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$("#sub").click(function(){
				if(!($("#qq").val().trim().length&&$("#words").val().trim().length)){
					alert("内容不能为空")
					return;
				}
				$("h3").after("<div id='newbox'><p>"+$("#qq").val()+"</p><p>"+$("#words").val()+"</p><button>删除</button></div>")
				$("h3").next().slideDown(300);
				
				$("#newbox>button").click(function(){
					$(this).parent().slideUp(500,function(){
						$(this).remove();
					});
				})
				$("#qq").val("");
				$("#words").val("");
			})
		</script>
	</body>
</html>
